<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../static/third/editormd/css/editormd.css" th:href="@{/third/editormd/css/editormd.css}">
    <!--<link rel="stylesheet"  th:href="@{/third/editormd/lib/codemirror/lib/codemirror.css}">-->
    <link rel="stylesheet" href="../../../static/third/editormd/css/editormd.preview.css" th:href="@{/third/editormd/css/editormd.preview.css}">
    <!--<link rel="stylesheet" href="">-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style>
         .editormd-preview-theme-dark {
              color: #777;
              background:#2C2827;
          }

          .editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc {
              background:#fff;
              border:none;
          }

          .editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc h1{
              border-color:#ddd;
          }

          .editormd-preview-theme-dark .markdown-body h1,
          .editormd-preview-theme-dark .markdown-body h2,
          .editormd-preview-theme-dark .markdown-body hr {
              border-color: #222;
          }

          .editormd-preview-theme-dark .editormd-preview-container  blockquote {
              color: #555;
              border-color: #333;
              background: #222;
              padding: 0.5em;
          }

          .editormd-preview-theme-dark .editormd-preview-container abbr {
              background:#ff9900;
              color: #fff;
              padding: 1px 3px;
              border-radius: 3px;
          }

          .editormd-preview-theme-dark .editormd-preview-container code {
              background: #5A9600;
              color: #fff;
              border: none;
              padding: 1px 3px;
              border-radius: 3px;
          }

          .editormd-preview-theme-dark .editormd-preview-container table {
              border: none;
          }

          .editormd-preview-theme-dark .editormd-preview-container .fa-emoji {
              color: #B4BF42;
          }

          .editormd-preview-theme-dark .editormd-preview-container .katex {
              color: #FEC93F;
          }

          .editormd-preview-theme-dark [class*=editormd-logo] {
              color: #2196F3;
          }

          .editormd-preview-theme-dark .sequence-diagram text {
              fill: #fff;
          }

          .editormd-preview-theme-dark .sequence-diagram rect,
          .editormd-preview-theme-dark .sequence-diagram path {
              color:#fff;
              fill : #64D1CB;
              stroke : #64D1CB;
          }

          .editormd-preview-theme-dark .flowchart rect,
          .editormd-preview-theme-dark .flowchart path {
              stroke : #A6C6FF;
          }

          .editormd-preview-theme-dark .flowchart rect {
              fill: #A6C6FF;
          }

          .editormd-preview-theme-dark .flowchart text {
              fill: #5879B4;
          }
    </style>
</head>
<body>

<div class="container">
    <div id="editormd"  >
        <!--<textarea style="display:none;" th:value="${article.content}" id="code" name="test-editormd-markdown-doc" th:text="${article.content}"></textarea>-->
        <textarea style="display:none;"      th:text="${article.content}"></textarea>
    </div>

</div>


<script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
<script th:src="@{/third/editormd/lib/marked.min.js}"></script>
<script th:src="@{/third/editormd/lib/prettify.min.js}"></script>
<script   th:src="@{/third/editormd/editormd.min.js}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function() {
        editormd.markdownToHTML("editormd", {//注意：这里是上面DIV的id
            htmlDecode : "style,script,iframe",
            emoji : true,
            theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            taskList : true,
            tex : true, // 默认不解析
            codeFold : true
        });

        // editormd({
        //     path:"/third/edtiormd/lib/",
        //     theme : "dark",
        //     previewTheme : "dark",
        //     editorTheme : "pastel-on-dark",
        // });
        // editormd.markdownToHTML("editormd");

    });
</script>
</body>
</html>